<template>
  <div class="article-item">
    <!-- {{ article.title }} -->
    <van-cell label="描述信息">
      <!-- 标题插槽 -->
      <div slot="title" class="title">{{ article.title }}</div>
      <!-- 描述插槽 -->
      <div slot="label">
        <!-- 三张封面图片 -->
        <div v-if="article.cover.type === 3" class="cover-wrap">
          <van-image
            class="cover-item"
            v-for="(img, i) in article.cover.images"
            :key="i"
            width="100"
            height="100"
            :src="img"
          />
        </div>
        <!-- 文章描述 -->
        <div class="label-info-warp">
          <span>{{ article.aut_name + " - " }}</span>
          <span>{{ article.comm_count }} 评论 - </span>
          <span>{{ article.pubdate | relativeTime }} </span>
        </div>
      </div>
      <!-- 默认插槽-右侧图片显示 -->
      <div class="right-cover" slot="default" v-if="article.cover.type === 1">
        <van-image width="100" height="100" :src="article.cover.images[0]" />
      </div>
    </van-cell>
  </div>
</template>

<script>
// import dayjs from "dayjs";
// // 加载中文语言包
// import "dayjs/locale/zh-cn";
// dayjs.locale('zh-cn')
// import relativeTime from "dayjs/plugin/relativeTime";
// // 配置使用处理相对时间的插件
// dayjs.extend(relativeTime);

export default {
  name: "",
  props: ["article"],
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.article-item {
  // 标题
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }
  // 右侧区域
  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }
  // 右侧区域中的图片
  .van-image {
    width: 232px !important;
    height: 146px;
  }
  .right-cover {
    width: 232px;
    height: 146px;
    border: 1px solid #ccc;
  }
  .lable-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
  // 下册区域的图片
  .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      /deep/ img {
        width: 100%;
        height: 146px !important;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>